<template>
    <div class="label">
        <text class="necessary" v-if="!notnecessary">*</text>
        <text class="label-word" :class="[error ? 'col_ff0f37': 'col_868686', disable ? 'col_cecece' : '']" >{{content}}</text>
    </div>
</template>

<script>
export default {
  name: 'label',
  props: ['content', 'error', 'notnecessary', 'disable']
}
</script>

<style scoped>
    .label {
        flex-direction: row;
        align-items: center;
    }
    .necessary {
        margin-right: 16px;
        font-size: 28px;
        color: #ff0f37;
    }
    .label-word {
        font-size: 28px;
        font-weight: bold;
    }
    .col_868686 {
        color: #868686;
    }
    .col_ff0f37{
        color: #ff0f37;
    }
    .col_cecece {
        color: #cecece;
    }
</style>
